<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户信息展示</title>
    <!-- 引入 Vue.js -->
    <script src="https://unpkg.com/vue@2"></script>
    <!-- 引入 Axios -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        table, th, td {
            border: 1px solid #ddd;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
        th {
            background-color: #f2f2f2;
        }
        .login-form {
            margin: 20px;
        }
        .login-form input {
            margin: 5px;
        }
        .search-box {
            margin: 20px 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- 登录表单 -->
    <div v-if="!isLoggedIn" class="login-form">
        <h2>用户登录</h2>
        <input type="text" v-model="loginForm.username" placeholder="账号">
        <input type="password" v-model="loginForm.password" placeholder="密码">
        <button @click="login">登录</button>
        <p style="color: red;">{{ loginError }}</p>
    </div>

    <!-- 用户信息展示 -->
    <div v-if="isLoggedIn">
        <h1>用户信息展示</h1>
        <div class="search-box">
            <input type="text" v-model="searchKeyword" placeholder="通过手机号，姓名，搜索">
            <button @click="searchUsers">搜索</button>
            <button @click="getAllUsers">显示全部数据</button>
        </div>
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>手机</th>
                <th>住址</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="student in students" :key="student.id">
                <td>{{ student.id }}</td>
                <td>{{ student.name }}</td>
                <td>{{ student.age }}</td>
                <td>{{ student.gender }}</td>
                <td>{{ student.cellphone }}</td>
                <td>{{ student.address }}</td>
            </tr>
            </tbody>
        </table>
        <button @click="logout">退出登录</button>
    </div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            isLoggedIn: false, // 是否已登录
            users: [], // 用户信息列表
            loginForm: {
                username: '',
                password: ''
            },
            loginError: '', // 登录错误信息
            searchKeyword: '', // 搜索关键字
            user: {} // 当前用户信息
        },

        methods: {
            // 检查登录状态

            // 登录
            login() {
                console.log('Sending login request:', this.loginForm);
                axios.post('http://localhost:9999/login', this.loginForm)
                    .then(response => {
                        console.log('Login response:', response.data);
                        if (response.data.status === 1) {
                            this.isLoggedIn = true;
                            this.users =[response.data.data];
                            this.loginError = '';
                            alert("登录成功")
                        } else {
                            this.loginError = response.data.message || '登录失败，请重试';
                        }
                    })
                    .catch(error => {
                        console.error('Login request failed:', error);
                        this.loginError = '登录失败，请检查网络或服务器';
                    });
            },
            // 加载用户信息
            // loadUsers() {
            //     axios.get('http://localhost:9999/user/center',this.loginForm)
            //         .then(response => {
            //             if (response.data.status === 1) {
            //                 this.users = response.data.data;
            //                 console.log("获取全部用户信息"+this.users)
            //             } else {
            //                 this.users = {};
            //             }
            //         })
            //         .catch(error => {
            //             console.error('加载用户信息失败:', error);
            //             this.users = {};
            //         });
            // },
            // 退出登录
            logout() {
                axios.get('http://localhost:9999/logout')
                    .then(response => {
                        if (response.data.status === 1) {
                            this.isLoggedIn = false;
                            this.users = [];
                            this.user = null;
                        }
                    })
                    .catch(error => {
                        console.error('退出登录失败:', error);
                    });
            },
            // 获取所有用户信息
            getAllUsers() {
                axios.get('http://localhost:9999/student/list')
                    .then(response => {
                        if (response.data.status === 1) {
                            this.users = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('获取用户信息失败:', error);
                    });
            },
            // 按关键字搜索用户信息
            searchUsers() {
                axios.get('http://localhost:9999/student/search', {
                    params: { keyword: this.searchKeyword }
                })
                    .then(response => {
                        if (response.data.status === 1) {
                            this.users = response.data.data;
                        }
                    })
                    .catch(error => {
                        console.error('搜索用户信息失败:', error);
                    });
            }
        },
        // mounted() {
        //     this.checkLoginStatus();
        // },
    });
</script>
</body>
</html>